<script setup lang="ts">
import { searchConfig } from './config/search-config';
import { tableConfig } from './config/tableConfig';
import { generateNameToLevel } from '@/config/constant';
import { doGetBomMaterial } from '@/api/modeling/bom/index';
import type { MaterialChooseVO } from '@/api/modeling/ProcessManagement/model/type';
import { Message } from '@/instance';
import { ProductionType } from '@/config';

const props = defineProps(['visible', 'code', 'isChildren']);
const emit = defineEmits(['update:visible', 'ok', 'close']);

const dialogVisible = ref(false);
const searchRef = ref<SearchRef>();
const tableRef = ref<TableRef>();

const { handleFullscreen, getMaxHeight } = useModal();

watch(
    () => dialogVisible.value,
    val => {
        emit('update:visible', val);
    }
);

watch(
    () => props.visible,
    val => {
        dialogVisible.value = val;
    }
);

watch(
    () => tableRef.value?.tableData,
    tableData => {
        if (!props.code) return;
        if (tableData && Object.keys(tableData).length) {
            // 初始化物料编码列表选择行
            const row = tableData.filter(
                (item: MaterialChooseVO) => item.materialCode === props.code
            )[0];
            if (row) tableRef.value?.setCurrentRow(row); // 设置表格选中当前行
        }
    }
);

/**
 * 物料编码单选
 */
const handleOk = () => {
    const selectRow = tableRef.value?.selectTableRowData;

    dialogVisible.value = false;

    emit('ok', selectRow || {});
};

/**
 * 设置物料表格行样式名
 */
const getRowClassName = ({ row }: SlotData<MaterialChooseVO>) => {
    return row.productionType === ProductionType.HANDMADE ? '' : 'row-disabled';
};

/**
 * 点击当前物料列表行
 */
const handleRowClick = (row: MaterialChooseVO) => {
    if (row.productionType !== ProductionType.HANDMADE) {
        Message.error('当前物料生产类型为非自制件，请重新选择！');
        tableRef.value?.setCurrentRow();
        return;
    }
};

const router = useRouter();
const toLink = () => {
    dialogVisible.value = false;
    router.push('/materialsManagement');
    emit('close');
};
</script>

<template>
    <q-modal
        v-model:visible="dialogVisible"
        title="选择物料"
        width="960px"
        ok-text="保存"
        :style="{ top: '40px' }"
        :fullscreen="true"
        @ok="handleOk"
        @fullscreen="handleFullscreen"
    >
        <base-search ref="searchRef" :table-ref="tableRef" :search-config="searchConfig" />
        <base-table
            :id="generateNameToLevel('3')"
            ref="tableRef"
            :max-height="getMaxHeight"
            :tableConfig="tableConfig"
            :getDataFn="params => doGetBomMaterial({ ...params })"
            :table-attr="{ rowClassName: getRowClassName }"
            :modal-mode="true"
            :show-setting="false"
            :un-action="true"
            :added-params="{ isChildren, productionType: ProductionType.HANDMADE }"
            @row-click="handleRowClick"
        >
            <template #tableHeadStart>
                <q-push-button :is-text="false" @click="toLink" />
            </template>
        </base-table>
    </q-modal>
</template>

<style scoped lang="scss">
@include b(m-select) {
    @include e(material) {
        @include flex(flex-start);

        margin-bottom: 8px;
        font-size: 14px;
        color: var(--q-text-color-primary);

        label {
            display: block;
        }
    }
}

:deep() {
    .row-disabled {
        cursor: not-allowed;
    }
}
</style>
